<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Transfer 穿梭框</title>
	<link rel="stylesheet" href="../static/css/reset.css">
	<script src="../static/js/vue.global.prod.js"></script>
	<script src="../static/js/antd.min.js"></script>
	<script src="../static/js/icons_antd.js"></script>
</head>
<style>
.ant-space-item{
	margin-left: 20px;
}
</style>
<body>

<div id="app"><a-config-provider :locale="locale">
	<a-divider class="a-divi" orientation="left">基本用法</a-divider><!-- =============================================================== -->
	<p class="desc">最基本的用法，展示了 dataSource、targetKeys、每行的渲染函数 render 以及回调函数 change selectChange scroll 的用法。</p>
	<a-space direction="vertical">
		<a-transfer v-model:target-keys="targetKeys1" v-model:selected-keys="selectedKeys1" :data-source="mockData1"
			:titles="['Source', 'Target']" :render="item => item.title" :disabled="disabled1" @change="handleChange1"
			@select-Change="handleSelectChange1" @scroll="handleScroll1"></a-transfer>
		<a-switch v-model:checked="disabled1" uncheckedchildren="enabled" checkedchildren="disabled" style="margin-top: 16px"></a-switch>
	</a-space>
	
	<a-divider class="a-divi" orientation="left">单向样式</a-divider><!-- =============================================================== -->
	<p class="desc">通过 oneWay 将 Transfer 转为单向样式。</p>
	<a-space direction="vertical">
		<a-transfer v-model:target-keys="targetKeys2" v-model:selected-keys="selectedKeys2" :data-source="mockData2" :one-way="true"
			:titles="['Source', 'Target']" :render="item => item.title" :disabled="disabled2" @change="handleChange1"
			@select-Change="handleSelectChange1" @scroll="handleScroll1"></a-transfer>
		<a-switch v-model:checked="disabled2" uncheckedchildren="enabled" checkedchildren="disabled" style="margin-top: 16px"></a-switch>
	</a-space>
	
	<a-divider class="a-divi" orientation="left">带搜索框</a-divider><!-- =============================================================== -->
	<p class="desc">带搜索框的穿梭框，可以自定义搜索函数。</p>
	<p class="desc">注意这里自定义了语言：:locale="locale9"。</p>
	<a-space direction="vertical">
		<a-transfer v-model:target-keys="targetKeys3" :data-source="mockData3" show-search :filter-option="filterOption3" :list-style="{height: '300px',}"
			:render="item => item.title" @change="handleChange1" @search="handleSearch3" :locale="locale9"></a-transfer>
	</a-space>
	
	<a-divider class="a-divi" orientation="left">高级用法</a-divider><!-- =============================================================== -->
	<p class="desc">穿梭框高级用法，可配置操作文案，可定制宽高，可对底部进行自定义渲染。</p>
	<a-space direction="vertical">
		<a-transfer v-model:target-keys="targetKeys4" :data-source="mockData4" show-search :list-style="{width: '250px',height: '300px',}"
			:operations="['to right', 'to left']" :render="item => `${item.title}-${item.description}`" @change="handleChange1">
			<template #footer="{ direction }">
				<a-button v-if="direction === 'left'" size="small" style="float: left; margin: 5px" @click="getMock4">
					left reload
				</a-button>
				<a-button v-else-if="direction === 'right'" size="small" style="float: right; margin: 5px" @click="getMock4">
					right reload
				</a-button>
			</template>
			<template #notFoundContent>
				<span>没数据(不建议用)</span>
			</template>
		</a-transfer>
	</a-space>
	
	<a-divider class="a-divi" orientation="left">自定义渲染行数据</a-divider><!-- =============================================================== -->
	<p class="desc">使用render插槽，自定义渲染每一个 Transfer Item，可用于渲染复杂数据。</p>
	<a-space direction="vertical">
		<a-transfer v-model:target-keys="targetKeys5" :data-source="mockData5" :list-style="{width: '300px',height: '300px',}" @change="handleChange1">
			<template #render="item">
				<span class="custom-item" style="color: red">{{ item.title }} - {{ item.description }}</span>
			</template>
		</a-transfer>
	</a-space>
	
	<a-divider class="a-divi" orientation="left">分页</a-divider><!-- =============================================================== -->
	<p class="desc">大数据下使用分页。</p>
	<a-space direction="vertical">
		<a-transfer v-model:target-keys="targetKeys6" :data-source="mockData6" :render="item => item.title" :pagination="pagination6"></a-transfer>
	</a-space>
	
	<a-divider class="a-divi" orientation="left">表格穿梭框</a-divider><!-- =============================================================== -->
	<p class="desc">使用 Table 组件作为自定义渲染列表。</p>
	<a-space direction="vertical" style="width: 1200px;">
		<a-transfer v-model:target-keys="targetKeys7" :data-source="mockData7" :disabled="disabled7" :show-search="showSearch7"
			:filter-option="(inputValue, item) => item.title.indexOf(inputValue) !== -1" :show-select-all="false" @change="handleChange1">
			<template #children="{direction, filteredItems, selectedKeys, disabled: listDisabled, onItemSelectAll, onItemSelect,}">
				<a-table :data-source="filteredItems" :row-selection="getRowSelection(listDisabled, selectedKeys, onItemSelectAll, onItemSelect)"
					:columns="direction === 'left' ? leftColumns : rightColumns" size="small" :style="{ pointerEvents: listDisabled ? 'none' : null }"
					:custom-row="({ key, disabled: itemDisabled }) => ({
						onClick: () => {
							console.log(onItemSelect);
							if (itemDisabled || listDisabled) return;
							onItemSelect(key, !selectedKeys.includes(key));
						},
					})"
					></a-table>
			</template>
		</a-transfer>
		<a-switch v-model:checked="disabled7" uncheckedchildren="disabled" checkedchildren="disabled"></a-switch>
		<a-switch v-model:checked="showSearch7" uncheckedchildren="showSearch" checkedchildren="showSearch"></a-switch>
	</a-space>
	
	<a-divider class="a-divi" orientation="left">树穿梭框</a-divider><!-- =============================================================== -->
	<p class="desc">使用 Tree 组件作为自定义渲染列表。</p>
	<a-space direction="vertical" style="width: 1200px;">
		<a-transfer v-model:target-keys="targetKeys8" class="tree-transfer" :data-source="mockData8" :render="item => item.title" :show-select-all="false">
			<template #children="{ direction, selectedKeys, onItemSelect }">
				<a-tree v-if="direction === 'left'" block-node checkable check-strictly default-expand-all
					:checked-keys="[...selectedKeys, ...targetKeys8]" :tree-data="treeData8" @check="(_, props) => {
						onChecked8(props, [...selectedKeys, ...targetKeys8], onItemSelect);
					}" @select="(_, props) => {
						onChecked8(props, [...selectedKeys, ...targetKeys8], onItemSelect);
					}"></a-tree>
			</template>
		</a-transfer>
	</a-space>
	
	<a-divider class="a-divi" orientation="left">自定义状态</a-divider><!-- =============================================================== -->
	<p class="desc">使用 status 为 DatePicker 添加状态，可选 error 或者 warning。</p>
	<a-space direction="vertical">
		<a-transfer status="error"></a-transfer>
		<a-transfer status="warning" show-search></a-transfer>
	</a-space>
	
	<a-divider class="a-divi" orientation="left">自定义全选文字</a-divider><!-- =============================================================== -->
	<p class="desc">自定义穿梭框全选按钮的文字。</p>
	<a-space direction="vertical">
		<a-transfer v-model:target-keys="targetKeys10" v-model:selected-keys="selectedKeys10" :data-source="mockData10"
			:titles="['Source', 'Target9']" :render="item => item.title" :select-all-labels="selectAllLabels10"
			:disabled="disabled10" @change="handleChange1" @select-Change="handleSelectChange1" @scroll="handleScroll1"></a-transfer>
		<a-switch v-model:checked="disabled10" uncheckedchildren="enabled" checkedchildren="disabled"></a-switch>
	</a-space>
	
	
</a-config-provider></div>
<div class="h100"></div>

</body>
<script>
function getMockData(n){
	let ret = [];
	for (let i = 0; i < n; i++) {
		ret.push({
			key: i.toString(),
			title: `content${i + 1}`,
			description: `description of content${i + 1} 【d${i + 1}】`,
			disabled: i % 3 == 0,
		});
	}
	return ret;
}
const oriTargetKeys = getMockData(20).filter(item => +item.key % 3 > 1).map(item => item.key);		//['2', '5', '8', '11', '14', '17']

const tData = [
	{key: '0-0', title: '湖南'},
	{key: '0-1', title: '湖北',
		children: [
			{key: '0-1-0', title: '武汉', children: [{key: '0-1-12', title: '汉口'},]},
			{key: '0-1-1', title: '宜昌'},
		],
	},
	{key: '0-2', title: '河南'},
];
const transferDataSource = [];
function flatten(list = []) {
	list.forEach(item => {
		transferDataSource.push(item);
		flatten(item.children);
	});
}
flatten(tData);
function handleTreeData(treeNodes, targetKeys){
	return treeNodes.map(({children, ...props}) => {
		// console.log({children, ...props})
		return {
			...props,
			disabled: targetKeys.includes(props.key),
			children: handleTreeData(children || [], targetKeys),
		};
	});
}
const targetKeys8 = [];
// console.log(handleTreeData(tData, targetKeys8));
function isChecked(selectedKeys, eventKey){
	return selectedKeys.indexOf(eventKey) !== -1;
}


const Main = {
data() {
	return {
		locale: localeValues,
		// locale: {},
		locale9: { itemUnit: '项8', itemsUnit: '项9', notFoundContent: '1列表为空', searchPlaceholder: '2请输入搜索内容' },
		
		mockData1: getMockData(20),
		disabled1: false,
		targetKeys1: oriTargetKeys,
		selectedKeys1: ['1', '4'],
		
		mockData2: getMockData(30),
		disabled2: false,
		targetKeys2: oriTargetKeys,
		selectedKeys2: ['1', '4'],
		
		mockData3: getMockData(20),
		targetKeys3: oriTargetKeys,
		
		mockData4: getMockData(20),
		targetKeys4: oriTargetKeys,
		
		mockData5: getMockData(20),
		targetKeys5: oriTargetKeys,
		
		mockData6: getMockData(120),
		targetKeys6: oriTargetKeys,
		// pagination6: {pageSize: 8, simple: false, showSizeChanger: false, showLessItems: false},
		pagination6: true,
		
		mockData7: getMockData(20),
		targetKeys7: oriTargetKeys,
		leftColumns: [
			{dataIndex: 'title',title: 'Name',},
			{dataIndex: 'description',title: 'Description',},
		],
		rightColumns: [
			{dataIndex: 'title',title: 'Name',},
		],
		disabled7: false,
		showSearch7: false,
		
		mockData8: transferDataSource,
		targetKeys8,
		
		mockData10: getMockData(20),
		disabled10: false,
		targetKeys10: oriTargetKeys,
		selectedKeys10: ['1', '4'],
		
	}
},
computed: {
	treeData8(){
		// console.log(this.handleTreeData8(tData, this.targetKeys8));
		return this.handleTreeData8(tData, this.targetKeys8);
		// return handleTreeData(tData, targetKeys8);
	},
	
	selectAllLabels10(){
		return ['Select All', ({selectedCount, totalCount}) => `【${selectedCount}/${totalCount}】`];
		return ['Select All', `aaa`];
	},
	
},
methods:{
	handleTreeData8(treeNodes, targetKeys){
		return treeNodes.map(({children, ...props}) => {
			// console.log({children, ...props})
			return {
				...props,
				disabled: targetKeys.includes(props.key),
				children: handleTreeData(children || [], targetKeys),
			};
		});
	},
	
	handleChange1(targetKeys, direction, moveKeys){
		console.log('targetKeys: ', targetKeys);
		console.log('direction: ', direction);
		console.log('moveKeys: ', moveKeys);
	},
	handleSelectChange1(sourceSelectedKeys, targetSelectedKeys){
		console.log('sourceSelectedKeys: ', sourceSelectedKeys);
		console.log('targetSelectedKeys: ', targetSelectedKeys);
	},
	handleScroll1(direction, event){
		console.log('direction:', direction);
		console.log('target:', event);
	},
	
	filterOption3(inputValue, option){
		// console.log('filterOption3:', inputValue, option);
		return option.title.indexOf(inputValue) > -1;
		return option.description.indexOf(inputValue) > -1;
		return false;
	},
	handleSearch3(direction, value){
		console.log('handleSearch3:', direction, value);
	},
	
	getMock4(){
		console.log('getMock4');
	},
	
	getRowSelection(disabled, selectedKeys, onItemSelectAll, onItemSelect){
		return {
			getCheckboxProps: (item) => ({disabled: disabled || item.disabled,}),
			onSelectAll(selected, selectedRows) {
				const treeSelectedKeys = selectedRows.filter(item => !item.disabled).map(({ key }) => key);
				onItemSelectAll(treeSelectedKeys, selected);
			},
			onSelect({ key }, selected) {
				onItemSelect(key, selected);
			},
			selectedRowKeys: selectedKeys,
		};
	},
	
	onChecked8(e, checkedKeys, onItemSelect){
		const { eventKey } = e.node;
		onItemSelect(eventKey, !isChecked(checkedKeys, eventKey));
	},
	
	
},
}

const app = Vue.createApp(Main);
for (const [key, component] of Object.entries(AntdIconsVue)) {app.component(key, component)};
app.use(antd);
let vm = app.mount("#app");


</script>
</html>
